<template>
  <div class="modal-full-layout" v-if="visible">
    <span class="header">
      <div class="header-left">
        <span
          class="back"
          @click="
            () => {
              $emit('cancel');
            }
          "
        >
          <a-icon type="arrow-left" />
          <span class="text">{{ backText }}</span>
        </span>
        <a-divider type="vertical" />
        <span class="title text">{{ title }}</span>
      </div>
      <div v-if="!$slots.button">
        <a-button
          type="primary"
          class="margin-right-xs"
          @click="
            () => {
              $emit('ok');
            }
          "
          v-if="showOk"
          >{{ okText }}</a-button
        >
        <a-button
          @click="
            () => {
              $emit('cancel');
            }
          "
          v-if="showCancel"
          >{{ cancelText }}</a-button
        >
      </div>
      <div v-else>
        <slot name="button"></slot>
      </div>
    </span>
    <div class="main">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "InlineModal",
  props: {
    visible: {
      // 弹框显示隐藏
      type: Boolean,
    },
    title: {
      // 弹框标题
      type: String,
      default: "内嵌弹框",
    },
    showOk: {
      // 确认按钮显示隐藏
      type: Boolean,
      default: true,
    },
    showCancel: {
      // 关闭按钮显示隐藏
      type: Boolean,
      default: true,
    },
    backText: {
      // 返回按钮文字
      type: String,
      default: "后退",
    },
    okText: {
      // 确认按钮文字
      type: String,
      default: "确认",
    },
    cancelText: {
      // 关闭按钮文字
      type: String,
      default: "关闭",
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped lang="less">
.modal-full-layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: @base-bg-color;
  z-index: 99;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;

    .header-left {
      display: flex;
      align-items: center;
      justify-content: center;

      .back {
        font-size: 14px;
        cursor: pointer;
      }

      .title {
        font-size: 16px;
      }

      .text {
        padding: 0 5px;
      }
    }
  }

  .main {
    flex: 1;
    overflow-y: scroll;
    overflow-y: overlay;
    padding: 10px;
  }
}
</style>
